تسلط بر hook آزمایشی experimental_useSyncExternalStore در React: راهنمای جامع

hook آزمایشی experimental_useSyncExternalStore در React ابزاری قدرتمند برای همگام‌سازی کامپوننت‌های React با منابع داده خارجی است. این hook به کامپوننت‌ها اجازه می‌دهد تا به طور موثر به تغییرات در فروشگاه‌های خارجی مشترک شوند و تنها در صورت لزوم دوباره رندر شوند. درک و پیاده‌سازی موثر experimental_useSyncExternalStore برای ساخت برنامه‌های React با کارایی بالا که به طور یکپارچه با سیستم‌های مختلف مدیریت داده خارجی ادغام می‌شوند، بسیار مهم است.

فروشگاه خارجی چیست؟

قبل از ورود به جزئیات hook، مهم است که منظور خود را از "فروشگاه خارجی" تعریف کنیم. فروشگاه خارجی هر ظرف داده یا سیستم مدیریت وضعیت است که خارج از وضعیت داخلی React وجود دارد. این می‌تواند شامل موارد زیر باشد:

• کتابخانه‌های مدیریت وضعیت سراسری: Redux, Zustand, Jotai, Recoil
• APIهای مرورگر: localStorage, sessionStorage, IndexedDB
• کتابخانه‌های دریافت داده: SWR, React Query
• منابع داده بی‌درنگ: WebSockets, Server-Sent Events
• کتابخانه‌های شخص ثالث: کتابخانه‌هایی که پیکربندی یا داده‌ها را خارج از درخت کامپوننت React مدیریت می‌کنند.

ادغام موثر با این منابع داده خارجی اغلب چالش‌هایی را ایجاد می‌کند. مدیریت وضعیت داخلی React ممکن است کافی نباشد، و اشتراک دستی در تغییرات این منابع خارجی می‌تواند منجر به مشکلات عملکردی و کد پیچیده شود. experimental_useSyncExternalStore با ارائه راهی استاندارد و بهینه برای همگام‌سازی کامپوننت‌های React با فروشگاه‌های خارجی، این مشکلات را حل می‌کند.

معرفی experimental_useSyncExternalStore

hook experimental_useSyncExternalStore بخشی از ویژگی‌های آزمایشی React است، به این معنی که API آن ممکن است در نسخه‌های آینده تکامل یابد. با این حال، عملکرد اصلی آن یک نیاز اساسی در بسیاری از برنامه‌های React را برآورده می‌کند و باعث می‌شود درک و آزمایش با آن ارزشمند باشد.

امضای پایه hook به شرح زیر است:

            const value = experimental_useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?);

            

              
                Copy
              
            
          

بیایید هر آرگومان را تفکیک کنیم:

• subscribe: (callback: () => void) => () => void: این تابع مسئول اشتراک در تغییرات فروشگاه خارجی است. این تابع یک تابع callback را به عنوان آرگومان می‌گیرد که React هر زمان که فروشگاه تغییر کند، آن را فراخوانی می‌کند. تابع subscribe باید تابع دیگری را برگرداند که با فراخوانی آن، callback از فروشگاه لغو اشتراک می‌شود. این امر برای جلوگیری از نشت حافظه حیاتی است.
• getSnapshot: () => T: این تابع یک snapshot از داده‌ها از فروشگاه خارجی برمی‌گرداند. React از این snapshot برای تعیین اینکه آیا داده‌ها از آخرین رندر تغییر کرده‌اند استفاده خواهد کرد. باید یک تابع خالص باشد (بدون اثرات جانبی).
• getServerSnapshot?: () => T (اختیاری): این تابع فقط در طول رندر سمت سرور (SSR) استفاده می‌شود. این یک snapshot اولیه از داده‌ها را برای HTML رندر شده سمت سرور فراهم می‌کند. اگر ارائه نشود، React در طول SSR خطا خواهد داد. این تابع نیز باید خالص باشد.

این hook snapshot فعلی داده‌ها را از فروشگاه خارجی برمی‌گرداند. تضمین می‌شود که این مقدار در زمان رندر کامپوننت با فروشگاه خارجی به‌روز باشد.

مزایای استفاده از experimental_useSyncExternalStore

استفاده از experimental_useSyncExternalStore مزایای متعددی نسبت به مدیریت دستی اشتراک‌ها در فروشگاه‌های خارجی دارد:

• بهینه‌سازی عملکرد: React می‌تواند با مقایسه snapshots به طور موثری تشخیص دهد که چه زمانی داده‌ها تغییر کرده‌اند و از رندر مجدد غیرضروری جلوگیری کند.
• به‌روزرسانی خودکار: React به طور خودکار در فروشگاه خارجی مشترک و لغو اشتراک می‌شود، منطق کامپوننت را ساده کرده و از نشت حافظه جلوگیری می‌کند.
• پشتیبانی SSR: تابع getServerSnapshot رندر سمت سرور یکپارچه با فروشگاه‌های خارجی را امکان‌پذیر می‌سازد.
• امنیت همزمان: این hook برای کارکرد صحیح با ویژگی‌های رندر همزمان React طراحی شده است و اطمینان حاصل می‌کند که داده‌ها همیشه سازگار هستند.
• کد ساده‌شده: کد boilerplate مرتبط با اشتراک‌ها و به‌روزرسانی‌های دستی را کاهش می‌دهد.

نمونه‌های عملی و موارد استفاده

برای نشان دادن قدرت experimental_useSyncExternalStore، بیایید چندین نمونه عملی را بررسی کنیم.

۱. ادغام با یک فروشگاه سفارشی ساده

ابتدا، یک فروشگاه سفارشی ساده برای مدیریت یک شمارنده ایجاد می‌کنیم:

            // counterStore.js
let count = 0;
let listeners = [];

const counterStore = {
  subscribe: (listener) => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot: () => count,
  increment: () => {
    count++;
    listeners.forEach((listener) => listener());
  },
};

export default counterStore;

            

              
                Copy
              
            
          

اکنون، یک کامپوننت React ایجاد می‌کنیم که از experimental_useSyncExternalStore برای نمایش و به‌روزرسانی شمارنده استفاده می‌کند:

            // CounterComponent.jsx
import React from 'react';
import { experimental_useSyncExternalStore } from 'react';
import counterStore from './counterStore';

function CounterComponent() {
  const count = experimental_useSyncExternalStore(
    counterStore.subscribe,
    counterStore.getSnapshot
  );

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={counterStore.increment}>Increment</button>
    </div>>
  );
}

export default CounterComponent;

            

              
                Copy
              
            
          

در این نمونه، CounterComponent با استفاده از experimental_useSyncExternalStore به تغییرات در counterStore مشترک می‌شود. هر زمان که تابع increment روی فروشگاه فراخوانی شود، کامپوننت دوباره رندر می‌شود و شمارنده به‌روز شده را نمایش می‌دهد.

۲. ادغام با localStorage

localStorage روشی رایج برای ذخیره داده در مرورگر است. بیایید ببینیم چگونه آن را با experimental_useSyncExternalStore ادغام کنیم.

            // localStorageStore.js
const localStorageStore = {
  subscribe: (listener) => {
    window.addEventListener('storage', listener);
    return () => {
      window.removeEventListener('storage', listener);
    };
  },
  getSnapshot: (key) => {
    try {
      return localStorage.getItem(key) || '';
    } catch (error) {
      console.error("Error accessing localStorage:", error);
      return '';
    }
  },
  setItem: (key, value) => {
    try {
      localStorage.setItem(key, value);
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  },
};

export default localStorageStore;

            

              
                Copy
              
            
          

نکات مهم در مورد `localStorage`:

• رویداد `storage` فقط در سایر زمینه‌های مرورگر (مانند سایر تب‌ها، پنجره‌ها) که به همان مبدأ دسترسی دارند، فعال می‌شود. در داخل همان تب، باید رویداد را پس از تنظیم مورد به صورت دستی ارسال کنید.
• `localStorage` می‌تواند خطا ایجاد کند (به عنوان مثال، زمانی که سهمیه فراتر رفت). بسیار مهم است که عملیات را در بلوک‌های `try...catch` قرار دهید.

اکنون، یک کامپوننت React ایجاد می‌کنیم که از این فروشگاه استفاده می‌کند:

            // LocalStorageComponent.jsx
import React, { useState } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import localStorageStore from './localStorageStore';

function LocalStorageComponent({ key }) {
  const [inputValue, setInputValue] = useState('');
  const storedValue = experimental_useSyncExternalStore(
    localStorageStore.subscribe,
    () => localStorageStore.getSnapshot(key)
  );

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSave = () => {
    localStorageStore.setItem(key, inputValue);
  };

  return (
    <div>
      <label>Value for key "{key}":</label>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button onClick={handleSave}>Save to LocalStorage</button>
      <p>Stored Value: {storedValue}</p>
    </div>>
  );
}

export default LocalStorageComponent;

            

              
                Copy
              
            
          

این کامپوننت به کاربران اجازه می‌دهد تا متن را وارد کنند، آن را در localStorage ذخیره کنند و مقدار ذخیره شده را نمایش دهند. hook experimental_useSyncExternalStore اطمینان حاصل می‌کند که کامپوننت همیشه آخرین مقدار موجود در localStorage را منعکس می‌کند، حتی اگر از طریق تب یا پنجره دیگری به‌روزرسانی شده باشد.

۳. ادغام با یک کتابخانه مدیریت وضعیت سراسری (Zustand)

برای برنامه‌های پیچیده‌تر، ممکن است از یک کتابخانه مدیریت وضعیت سراسری مانند Zustand استفاده کنید. در اینجا نحوه ادغام Zustand با experimental_useSyncExternalStore آمده است.

            // zustandStore.js
import { create } from 'zustand';

const useZustandStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (itemId) =>
    set((state) => ({ items: state.items.filter((item) => item.id !== itemId) })),
}));

export default useZustandStore;

            

              
                Copy
              
            
          

اکنون یک کامپوننت React ایجاد کنید:

            // ZustandComponent.jsx
import React, { useState } from 'react';
import { experimental_useSyncExternalStore } from 'react';
import useZustandStore from './zustandStore';
import { v4 as uuidv4 } from 'uuid';

function ZustandComponent() {
  const [itemName, setItemName] = useState('');
  const items = experimental_useSyncExternalStore(
    useZustandStore.subscribe,
    useZustandStore.getState
  ).items;

  const handleAddItem = () => {
    if (itemName.trim() !== '') {
      useZustandStore.getState().addItem({ id: uuidv4(), name: itemName });
      setItemName('');
    }
  };

  const handleRemoveItem = (itemId) => {
    useZustandStore.getState().removeItem(itemId);
  };

  return (
    <div>
      <input
        type="text"
        value={itemName}
        onChange={(e) => setItemName(e.target.value)}
        placeholder="Item Name"
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item.id}
            >
            {item.name}
            <button onClick={() => handleRemoveItem(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>>
  );
}

export default ZustandComponent;

            

              
                Copy
              
            
          

در این نمونه، ZustandComponent به فروشگاه Zustand مشترک می‌شود و لیستی از موارد را نمایش می‌دهد. هنگام افزودن یا حذف یک مورد، کامپوننت به طور خودکار دوباره رندر می‌شود تا تغییرات را در فروشگاه Zustand منعکس کند.

رندر سمت سرور (SSR) با experimental_useSyncExternalStore

هنگام استفاده از experimental_useSyncExternalStore در برنامه‌های رندر شده سمت سرور، باید تابع getServerSnapshot را ارائه دهید. این تابع به React اجازه می‌دهد تا یک snapshot اولیه از داده‌ها را در طول رندر سمت سرور به دست آورد. بدون آن، React خطا خواهد داد زیرا نمی‌تواند به فروشگاه خارجی در سرور دسترسی پیدا کند.

در اینجا نحوه اصلاح مثال شمارنده ساده برای پشتیبانی از SSR آمده است:

            // counterStore.js (SSR-enabled)
let count = 0;
let listeners = [];

const counterStore = {
  subscribe: (listener) => {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot: () => count,
  getServerSnapshot: () => 0, // Provide an initial value for SSR
  increment: () => {
    count++;
    listeners.forEach((listener) => listener());
  },
};

export default counterStore;

            

              
                Copy
              
            
          

در این نسخه اصلاح شده، تابع getServerSnapshot را اضافه کرده‌ایم که مقدار اولیه 0 را برای شمارنده برمی‌گرداند. این تضمین می‌کند که HTML رندر شده سمت سرور حاوی یک مقدار معتبر برای شمارنده است و کامپوننت سمت کلاینت می‌تواند به طور یکپارچه از HTML رندر شده سمت سرور هیدراته شود.

برای سناریوهای پیچیده‌تر، مانند مواردی که با داده‌های دریافت شده از پایگاه داده سروکار دارند، باید داده‌ها را در سرور دریافت کرده و آنها را به عنوان snapshot اولیه در getServerSnapshot ارائه دهید.

بهترین شیوه‌ها و ملاحظات

هنگام استفاده از experimental_useSyncExternalStore، شیوه‌های بهترین زیر را در نظر داشته باشید:

• getSnapshot را خالص نگه دارید: تابع getSnapshot باید یک تابع خالص باشد، به این معنی که نباید هیچ اثر جانبی داشته باشد. فقط باید یک snapshot از داده‌ها را برگرداند بدون اینکه فروشگاه خارجی را تغییر دهد.
• اندازه Snapshot را به حداقل برسانید: سعی کنید اندازه snapshot بازگشتی توسط getSnapshot را به حداقل برسانید. React برای تشخیص تغییر داده‌ها، snapshots را مقایسه می‌کند، بنابراین snapshots کوچکتر عملکرد را بهبود می‌بخشند.
• منطق اشتراک را بهینه کنید: اطمینان حاصل کنید که تابع subscribe به طور موثر به تغییرات در فروشگاه خارجی مشترک می‌شود. از اشتراک‌های غیرضروری یا منطق پیچیده‌ای که می‌تواند برنامه را کند کند، اجتناب کنید.
• خطاها را به طور موثر مدیریت کنید: آماده باشید تا خطاهایی را که ممکن است هنگام دسترسی به فروشگاه خارجی رخ دهد، مدیریت کنید، به خصوص در محیط‌هایی مانند localStorage که سهمیه‌های ذخیره‌سازی ممکن است فراتر رود.
• Memoization را در نظر بگیرید: در مواردی که ایجاد snapshot از نظر محاسباتی پرهزینه است، نتیجه getSnapshot را memoize کنید تا از محاسبات تکراری جلوگیری شود. کتابخانه‌هایی مانند useMemo می‌توانند مفید باشند.
• از حالت همزمان آگاه باشید: اطمینان حاصل کنید که فروشگاه خارجی شما با ویژگی‌های رندر همزمان React سازگار است. حالت همزمان ممکن است قبل از commit کردن یک رندر، getSnapshot را چندین بار فراخوانی کند.

ملاحظات جهانی

هنگام توسعه برنامه‌های React برای مخاطبان جهانی، جنبه‌های زیر را هنگام ادغام با فروشگاه‌های خارجی در نظر بگیرید:

• مناطق زمانی: اگر فروشگاه خارجی شما تاریخ‌ها یا زمان‌ها را مدیریت می‌کند، اطمینان حاصل کنید که مناطق زمانی را به درستی مدیریت می‌کنید تا از ناسازگاری برای کاربران در مناطق مختلف جلوگیری کنید. از کتابخانه‌هایی مانند date-fns-tz یا moment-timezone برای مدیریت مناطق زمانی استفاده کنید.
• بومی‌سازی: اگر فروشگاه خارجی شما حاوی متن یا محتوای دیگری است که نیاز به بومی‌سازی دارد، از یک کتابخانه بومی‌سازی مانند i18next یا react-intl برای ارائه محتوای محلی به کاربران بر اساس ترجیحات زبان آنها استفاده کنید.
• ارز: اگر فروشگاه خارجی شما داده‌های مالی را مدیریت می‌کند، اطمینان حاصل کنید که ارزها را به درستی مدیریت می‌کنید و قالب‌بندی مناسب را برای محلی‌های مختلف ارائه می‌دهید. از کتابخانه‌هایی مانند currency.js یا accounting.js برای مدیریت ارزها استفاده کنید.
• حریم خصوصی داده‌ها: هنگام ذخیره داده‌های کاربر در فروشگاه‌های خارجی مانند localStorage یا sessionStorage، مقررات حریم خصوصی داده‌ها مانند GDPR را در نظر داشته باشید. قبل از ذخیره داده‌های حساس، رضایت کاربر را دریافت کنید و مکانیزم‌هایی را برای دسترسی و حذف داده‌های خود توسط کاربران ارائه دهید.

جایگزین‌های experimental_useSyncExternalStore

در حالی که experimental_useSyncExternalStore ابزار قدرتمندی است، رویکردهای جایگزینی برای همگام‌سازی کامپوننت‌های React با فروشگاه‌های خارجی وجود دارد:

• Context API: Context API React می‌تواند برای ارائه داده‌ها از یک فروشگاه خارجی به درخت کامپوننت استفاده شود. با این حال، Context API ممکن است برای برنامه‌های در مقیاس بزرگ با به‌روزرسانی‌های مکرر به اندازه experimental_useSyncExternalStore کارآمد نباشد.
• Render Props: Render props می‌توانند برای اشتراک در تغییرات یک فروشگاه خارجی و انتقال داده‌ها به یک کامپوننت فرزند استفاده شوند. با این حال، Render props می‌توانند منجر به سلسله مراتب کامپوننت پیچیده و کدی شوند که نگهداری آن دشوار است.
• Custom Hooks: می‌توانید custom hookهایی را برای مدیریت اشتراک‌ها در فروشگاه‌های خارجی ایجاد کنید. با این حال، این رویکرد نیاز به توجه دقیق به بهینه‌سازی عملکرد و مدیریت خطا دارد.

انتخاب اینکه کدام رویکرد را باید استفاده کرد، به الزامات خاص برنامه شما بستگی دارد. experimental_useSyncExternalStore اغلب بهترین انتخاب برای برنامه‌های پیچیده با به‌روزرسانی‌های مکرر و نیاز به عملکرد بالا است.

نتیجه‌گیری

experimental_useSyncExternalStore راهی قدرتمند و کارآمد برای همگام‌سازی کامپوننت‌های React با منابع داده خارجی فراهم می‌کند. با درک مفاهیم اصلی، نمونه‌های عملی و بهترین شیوه‌های آن، توسعه‌دهندگان می‌توانند برنامه‌های React با کارایی بالا بسازند که به طور یکپارچه با سیستم‌های مختلف مدیریت داده خارجی ادغام می‌شوند. با تکامل React، experimental_useSyncExternalStore احتمالاً به ابزاری حتی مهم‌تر برای ساخت برنامه‌های پیچیده و مقیاس‌پذیر برای مخاطبان جهانی تبدیل خواهد شد. به خاطر داشته باشید که با دقت وضعیت آزمایشی و تغییرات احتمالی API را هنگام گنجاندن آن در پروژه‌های خود در نظر بگیرید. همیشه برای آخرین به‌روزرسانی‌ها و توصیه‌ها به مستندات رسمی React مراجعه کنید.